<template>
  <div class="order-detail-expand">
    <pro-table ref="tableRef" :data="tableData" :columns="columns" :tool-button="false" :pagination="false" :total="0">
      <!-- 操作 -->
      <!-- <template #operation="{ row: rowData }">
        <el-button type="primary" link @click="commEvent.onClear(rowData)">清机维护</el-button>
        <el-button type="danger" link @click="commEvent.onEdit(rowData)">修改</el-button>
      </template> -->
    </pro-table>
  </div>
  <!-- 清机维护 -->
  <EditDailyDialog
    v-model="editVisible"
    :rows="currRow"
    :factorys="factoryEnum"
    :lines="lineEnum"
    @refresh="commEvent.refreshData"
  />
  <!-- 日产修改 -->
  <EditNissanDialog
    v-model="editNissanVisible"
    :rows="currRow"
    :factorys="factoryEnum"
    :lines="lineEnum"
    @refresh="commEvent.refreshData"
  />
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue"
import EditDailyDialog from "./EditDailyDialog.vue"
import EditNissanDialog from "./EditNissanDialog.vue"
import { onMounted, ref } from "vue"
import { dailyList } from "@/api/modules/order"
import { ColumnProps, EnumProps, ProTableInstance } from "@/components/ProTable/interface"
import { SystemSpace } from "@/api/interface/order"
import { organByLevel } from "@/api/modules/system"
interface Props {
  row: any
}
const currRow = ref<SystemSpace.dailyList>() // 当前选中数据
const editVisible = ref<boolean>(false) // 修改弹窗
const editNissanVisible = ref<boolean>(false) // 日产修改弹窗
const factoryEnum = ref<EnumProps[]>([]) // 厂区
const lineEnum = ref<EnumProps[]>([]) // 产线
const props = defineProps<Props>()
const tableRef = ref<ProTableInstance>()
const tableData = ref<SystemSpace.dailyList[]>([])
const columns: ColumnProps<SystemSpace.dailyList>[] = [
  { prop: "factoryId", label: "所属厂区", width: 120, enum: factoryEnum },
  { prop: "lineId", label: "所属产线", width: 120, enum: lineEnum },
  { prop: "orderCode", label: "所属订单", width: 120 },
  { prop: "groupName", label: "班组", width: 120 },
  { prop: "prodCode", label: "产品编码", width: 120 },
  { prop: "prodName", label: "产品名称" },
  { prop: "produceCnt", label: "产量", width: 120 },
  { prop: "powerCnt", label: "能耗（kWh）", width: 120 },
  { prop: "powerIntensity", label: "单耗（kWh/t）" },
  { prop: "produceDate", label: "生产日期", width: 120 },
  { prop: "updateBy", label: "更新人", width: 120 },
  { prop: "updateTime", label: "更新时间", width: 120 },
  { prop: "operation", label: "操作", width: 220, fixed: "right" }
]
// 所有事件集合
const commEvent = {
  onClear: (row?: SystemSpace.dailyList) => {
    console.log("点击清机维护按钮，行数据：", row)
    console.log("factoryEnum：", factoryEnum.value)
    console.log("lineEnum：", lineEnum.value)
    currRow.value = row
    editVisible.value = true
    console.log("设置 editVisible 为 true，当前值：", editVisible.value)
  },
  onEdit: (row?: SystemSpace.dailyList) => {
    console.log("修改", row)
    currRow.value = row
    editNissanVisible.value = true
  },
  getFactory: async () => {
    const { data } = await organByLevel(1)
    factoryEnum.value = data.map(item => ({
      label: item.organName,
      value: item.id
    }))
  },
  // 获取所属产线
  getLine: async () => {
    const { data } = await organByLevel(2)
    lineEnum.value = data.map(item => ({
      label: item.organName,
      value: item.id
    }))
  },
  // 刷新日产数据
  refreshData: async () => {
    if (props.row.id) {
      const { data } = await dailyList(props.row.id)
      tableData.value = data || []
      console.log("日产数据已刷新", tableData.value)
    }
  }
}
onMounted(async () => {
  if (props.row.id) {
    const { data } = await dailyList(props.row.id)
    tableData.value = data || []
    console.log(tableData.value)
    commEvent.getFactory()
    commEvent.getLine()
  }
})
</script>

<style scoped>
.order-detail-expand {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin: 10px 0;
}

.progress-info {
  margin-top: 10px;
  text-align: center;
  color: #606266;
  font-size: 14px;
}

.energy-analysis {
  margin-top: 20px;
}

.energy-analysis h4 {
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
}

.energy-card {
  text-align: center;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.energy-item {
  padding: 10px;
}

.energy-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 5px;
}

.energy-label {
  font-size: 14px;
  color: #606266;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #303133;
}

:deep(.el-descriptions__content) {
  color: #606266;
}
</style>
